<template>
	<view class="details">
		<view class="swpte">
			<swiper class="swiper" circular 
				>
				<swiper-item v-for="(item,index) in list" :key="index">
					<image :src="item.image"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="price">
			<view class="sum"><text>¥</text>589</view>
			<view>儿童书法课程</view>
		</view>
		<view class="coneter">
			<view class="item">
				<view class="left">课程时间</view>
				<view class="right">2022.05.25-2022.06.30</view>
			</view>
			<view class="item">
				<view class="left">授课地点</view>
				<view class="right">北京天慧学习馆</view>
			</view>
			<view class="item">
				<view class="left">授课老师</view>
				<view class="right">李白</view>
			</view>
		</view>
		<view class="tertext">
			 <u-parse :html="content"></u-parse>
		</view>
		<view class="btn"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						image: 'https://img.js.design/assets/img/6767a9e2b30c45934aaa7bf4.png#78b7043eb76c6cdc8c6234c12b273cb7',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
								content: `
									<p>露从今夜白，月是故乡明</p>
									<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
								`
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.details{
		.swpte{
			width: 100%;
			height: 562rpx;
			swiper{
				height: 100%;
				width: 100%;
				swiper-item{
					height: 100%;
					width: 100%;
					image{
						height: 100%;
						width: 100%;
					}
				}
			}
		}
		.price{
			width: 95%;
			// margin: ;
			border-radius: 20rpx;
			background: rgba(255, 255, 255, 1);
			padding: 20rpx 30rpx;
			margin: 15rpx  auto 10rpx;
			.sum{
				color: rgba(249, 46, 46, 1);
				font-size: 42rpx;
				text{
					font-size: 28rpx;
				}
			}
			& view:nth-child(2){
				font-size: 32rpx;
			}
		}
		.coneter{
			width: 95%;
			// margin: ;
			border-radius: 20rpx;
			background: rgba(255, 255, 255, 1);
			padding: 20rpx 30rpx;
			margin: 15rpx  auto 10rpx;
			.item{
				display: flex;
				align-items: center;
				margin-bottom: 15rpx;
				font-size: 28rpx;
				justify-content: space-between;
				.left{
					color: rgba(153, 153, 153, 1);
				}
			}
		}
		.tertext{
			width: 95%;
			// margin: ;
			border-radius: 20rpx;
			background: rgba(255, 255, 255, 1);
			padding: 20rpx 30rpx;
			margin: 15rpx  auto 10rpx;
		}
		.btn{
			width: 586rpx;
			height: 78rpx;
			opacity: 1;
			background: linear-gradient(90deg, rgba(255, 134, 87, 1) 0%, rgba(250, 110, 30, 1) 100%);
			position: fixed;
			bottom: 5%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
	}
</style>